<div class="modal-header">
    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
    <h4 class="modal-title" id="myModalLabel">{:lang("product_overview")}</h4>
</div>
<div class="modal-body" id="mainss">
    <div class="row clearfix">
        <div class="col-md-12 column">
            <ul class="nav nav-tabs">
                <li class="active lang" langValue="zh" @click="changelange('zh')">
                    <a href="#home" data-toggle="tab">{:lang('Chinese')}</a>
                </li>
                <li class="lang" langValue="en" @click="changelange('en')">
                    <a href="#home" data-toggle="tab">{:lang('English')}</a>
                </li>
                <li class="lang" langValue="pt" @click="changelange('pt')">
                    <a href="#home" data-toggle="tab">{:lang('Portuguese')}</a>
                </li>
            </ul>
        </div>
    </div>
    <input type="hidden" name="id" id='id' value="{$id}">
    <div class="row" style="padding:10px 20px 0px 20px">
        <div class="col-md-2 text-center">
            <img :src="checkRead.img_url" border="0" style="max-width: 240px;max-height: 170px">
        </div>
        <div class="col-md-10">
            <table class="table table-striped">
                <tr>
                    <td class="field-name">{:lang('product_brand')}</td>
                    <td>{{checkRead.brand_name}}</td>
                    <td width="20%" class="field-name">{:lang('serial_number')}</td>
                    <td>{{checkRead.id}}</td>
                </tr>
                <tr>
                    <td class="field-name">{:lang('product_name')}</td>
                    <td colspan="3">{{checkRead.pro_name}}</td>
                </tr>
                <tr>
                    <td class="field-name">{:lang('introduction')}</td>
                    <td colspan="3">{{checkRead.prodesc}} </td>
                </tr>
                <tr>
                    <td class="field-name">{:lang('product_category')}</td>
                    <td colspan="3">{{checkRead.cateChild}}</td>
                </tr>
            </table>
   
        </div>
    </div>
    <table class="table table-striped table-hover ntTable" style="padding-top:0">
        <thead>
            <tr class="tr">
                <th>{:lang("model")}</th>
                <th>{:lang("factory_model")}</th>
                <th>{:lang("package")}</th>
                <th v-for="(itemTh,indexTh) in feature_name">{{itemTh}}</th>
                <th>{:lang("box_measure")}</th>
                <th>{:lang("description")}</th>
                <th>{:lang('status')}</th>
                <th>{:lang("barcode")}</th>
                <th>{:lang('edit')}</th>
            </tr>
        </thead>
        <tbody id="checkRead_role">
            <tr v-for="(item,index) in checkRead_role">
                <td>{{item.model}}</td>
                <td>{{item.factory_model}}</td>
                <td align="center">{{item.package_qty}}</td>
                <td v-for="(itemTd,indexTd) in item.feature_value">{{itemTd}}</td>
                <td>{{item.ctn_size}}</td>
                <td>{{item.ctn_note}}</td>
                <td>{{item.status}}</td>
                <td>{{item.codebar}}</td>
                <td>{{item.create_name}}<br /><small>{{item.create_at}}</small></td>
            </tr>
        </tbody>
    </table>
</div>
<script type="text/javascript">

    var V=new Vue({
        el:'#mainss',
        data:()=>({
            checkRead:{},
            checkRead_role:[],
            feature_name:[],
            lang:'zh'
        }),
        methods:{
            getdata(){
                $.ajax({
                    url:'/admin/product/list_open',
                    data: {
                        lang: this.lang,
                        id:$('#id').val()
                    },
                    type:'post',
                    success:(data)=>{
                        data = JSON.parse(data)
                        this.checkRead=data.checkRead
                        this.checkRead_role=data.checkRead_role
                        this.feature_name=data.feature_name
                    }
                })
            },
            changelange(lang){
                this.lang=lang
                this.getdata()
            }
        },
        mounted(){
            this.getdata()
        },
        watch:{
            lang:function(){
                this.getdata()
            },
            page:function(){
                this.getdata()
            }
        }
    })
</script>

<div class="modal-footer">
    <button type="button" class="btn btn-default" data-dismiss="modal">{:lang('close')}</button>
</div>
